<template>
  <view class="artwork-list-page">
    <!-- 自定义导航栏 -->
    <up-navbar :title="categoryName" :bgColor="'#fff'" height="50" fixed placeholder :leftIconColor="'#333'"
      @leftClick="handleBack">
    </up-navbar>

    <view class="content">
      <!-- 搜索框 -->
      <view class="search-box">
        <view class="search-section" @click="goToSearch">
          <up-input v-model="searchKeyword" placeholder="搜索作品名称" :border="'surround'" disabled>
            <template #prefix>
              <up-icon name="search" color="#999" size="16"></up-icon>
            </template>
          </up-input>
        </view>

        <!-- 筛选和排序 -->
        <view class="filter-section">
          <up-tabs :list="tagsList" :current="activeTagIndex" @change="changeTag" :scrollable="false"
            :showLine="false"></up-tabs>
        </view>

        <!-- 新增的书法类型筛选标签 -->
        <view class="filter-section secondary-filter">
          <up-tabs :list="tagsList[activeTagIndex].typesList" :current="activeTypeIndex" @change="changeType"
            :scrollable="false" :showLine="false"></up-tabs>
        </view>
      </view>
      <!-- 作品列表 -->
      <view class="artwork-list">
        <view v-for="(item, index) in filteredArtworks" :key="index" class="artwork-card"
          @click="goToArtworkDetail(item)">
          <image :src="item.image" class="artwork-image" mode="aspectFill"></image>
          <view class="artwork-info">
            <text class="artwork-title">{{ item.title }}</text>
            <text class="artwork-artist">{{ item.artist }}</text>
            <view class="artwork-meta">
              <text class="artwork-date">{{ item.date }}</text>
              <view class="artwork-stats">
                <view class="stat-item">
                  <up-icon name="eye" color="#999" size="12"></up-icon>
                  <text class="stat-text">{{ item.views }}</text>
                </view>
                <view class="stat-item">
                  <up-icon name="heart" color="#999" size="12"></up-icon>
                  <text class="stat-text">{{ item.likes }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <up-loadmore :status="loadStatus" />
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'

// 响应式数据
const searchKeyword = ref('')
const activeTagIndex = ref(0) // 第一行标签索引
const activeTypeIndex = ref(0) // 第二行书法类型索引
const categoryName = ref('作品列表')
const loadStatus = ref('loadmore')

// 标签数据（转换为up-tabs需要的格式）
const tagsList = reactive([
  {
    name: '书法',
    typesList: [
      { name: '行书' },
      { name: '楷书' },
      { name: '草书' },
      { name: '隶书' },
      { name: '篆书' }]
  },
  {
    name: '绘画', typesList: [
      { name: '山水' },
      { name: '人物' },
      { name: '鸟兽' },
      { name: '壁画' },
      { name: '白描' },
      { name: '册页扇面' },
      { name: '界面' },
      { name: '宗教' },
    ]
  },
  { name: '篆刻', typesList: [] },
  { name: '专栏', typesList: [] },
  { name: '工艺品', typesList: [] }
])

// 书法类型数据（转换为up-tabs需要的格式）
// const typesList = reactive([
//   { name: '全部' },
//   { name: '行书' },
//   { name: '楷书' },
//   { name: '草书' },
//   { name: '隶书' },
//   { name: '篆书' }
// ])

// 获取当前激活的标签和类型值
// const activeTag = computed(() => tagsList[activeTagIndex.value].name)
// const activeType = computed(() => {
//   const typeMap = {
//     '全部': 'all',
//     '行书': 'running',
//     '楷书': 'regular',
//     '草书': 'cursive',
//     '隶书': 'clerical',
//     '篆书': 'seal'
//   }
//   return typeMap[typesList[activeTypeIndex.value].name] || 'all'
// })

// 作品数据
const artworks = reactive([
  {
    id: 1,
    title: '兰亭序',
    artist: '王羲之',
    date: '东晋',
    views: 12800,
    likes: 856,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'running',
    tags: ['推荐', '热门']
  },
  {
    id: 2,
    title: '祭侄文稿',
    artist: '颜真卿',
    date: '唐代',
    views: 9600,
    likes: 724,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'running',
    tags: ['推荐', '热门']
  },
  {
    id: 3,
    title: '黄州寒食诗帖',
    artist: '苏轼',
    date: '宋代',
    views: 8400,
    likes: 652,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'running',
    tags: ['推荐']
  },
  {
    id: 4,
    title: '蜀素帖',
    artist: '米芾',
    date: '宋代',
    views: 7200,
    likes: 589,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'running',
    tags: ['热门']
  },
  {
    id: 5,
    title: '多宝塔碑',
    artist: '颜真卿',
    date: '唐代',
    views: 8900,
    likes: 621,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'regular',
    tags: ['推荐']
  },
  {
    id: 6,
    title: '九成宫醴泉铭',
    artist: '欧阳询',
    date: '唐代',
    views: 7800,
    likes: 543,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'regular',
    tags: ['热门']
  },
  {
    id: 7,
    title: '自叙帖',
    artist: '怀素',
    date: '唐代',
    views: 9200,
    likes: 687,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'cursive',
    tags: ['推荐', '热门']
  },
  {
    id: 8,
    title: '古诗四帖',
    artist: '张旭',
    date: '唐代',
    views: 6500,
    likes: 421,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'cursive',
    tags: ['最新']
  },
  {
    id: 9,
    title: '曹全碑',
    artist: '佚名',
    date: '东汉',
    views: 7800,
    likes: 567,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'clerical',
    tags: ['推荐']
  },
  {
    id: 10,
    title: '乙瑛碑',
    artist: '佚名',
    date: '东汉',
    views: 6200,
    likes: 432,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    type: 'clerical',
    tags: ['热门']
  }
])

// 筛选后的作品
const filteredArtworks = computed(() => {
  let result = [...artworks]

  // 搜索关键词筛选
  if (searchKeyword.value) {
    result = result.filter(item =>
      item.title.includes(searchKeyword.value) ||
      item.artist.includes(searchKeyword.value)
    )
  }

  // 第一行标签筛选
  // if (activeTag.value !== '全部') {
  //   result = result.filter(item => item.tags.includes(activeTag.value))
  // }

  // 书法类型筛选
  // if (activeType.value !== 'all') {
  //   result = result.filter(item => item.type === activeType.value)
  // }

  return result
})

// 页面加载时获取参数
onLoad((options) => {
  if (options.category) {
    categoryName.value = options.category
  }
})

// 返回上一页
const handleBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    // 如果有上一页，则返回上一页
    uni.navigateBack()
  } else {
    // 如果没有上一页，则跳转到首页
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
}

// 跳转到搜索页面
const goToSearch = () => {
  uni.navigateTo({
    url: '/gallery_pages/artwork/search'
  })
}

// 改变标签
const changeTag = (item) => {
  activeTagIndex.value = item.index
  // 重置书法类型筛选
  activeTypeIndex.value = 0
}

// 改变书法类型
const changeType = (item) => {
  activeTypeIndex.value = item.index
}

// 跳转到作品详情
const goToArtworkDetail = (artwork) => {
  uni.navigateTo({
    url: `/gallery_pages/artwork/detail?id=${artwork.id}`,
    fail: () => {
      uni.showToast({
        title: '详情页面开发中',
        icon: 'none'
      })
    }
  })
}

// 上拉加载更多
const loadMore = () => {
  if (loadStatus.value !== 'loading') {
    loadStatus.value = 'loading'

    // 模拟加载更多数据
    setTimeout(() => {
      // 这里可以添加实际的加载更多数据逻辑
      // 例如从服务器获取更多数据并添加到 artworks 数组中

      // 模拟添加新数据
      const typeValues = ['running', 'regular', 'cursive', 'clerical', 'seal']
      const randomType = typeValues[Math.floor(Math.random() * typeValues.length)]

      const newData = {
        id: artworks.length + 1,
        title: `作品 ${artworks.length + 1}`,
        artist: '艺术家',
        date: '现代',
        views: Math.floor(Math.random() * 5000),
        likes: Math.floor(Math.random() * 300),
        image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
        type: randomType,
        tags: ['最新']
      }

      artworks.push(newData)

      // 更新加载状态
      loadStatus.value = 'loadmore'

      uni.showToast({
        title: '加载成功',
        icon: 'success'
      })
    }, 1500)
  }
}

// 监听页面滚动到底部
onReachBottom(() => {
  loadMore()
})

onMounted(() => {
  // 页面加载完成后的初始化操作
})
</script>

<style lang="scss" scoped>
.artwork-list-page {
  min-height: 100vh;
  background: #f5f6fa;
}

.content {
  padding: 10rpx 10rpx 36rpx;
}

.search-box {
  padding: 10rpx 10rpx;
  background: #fff;
}

.search-section {
  margin-bottom: 20rpx;

  :deep(.up-input) {
    background: #fff;
    border-radius: 50rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }
}

.filter-section {
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  margin-bottom: 10rpx;

  &.secondary-filter {
    margin-top: -10rpx;
    margin-bottom: 20rpx;
  }
}

.artwork-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.artwork-card {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.artwork-image {
  width: 100%;
  height: 300rpx;
  // padding: 20rpx 10rpx;
}

.artwork-info {
  padding: 10rpx 20rpx;

  .artwork-title {
    display: block;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
  }

  .artwork-artist {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 16rpx;
  }

  .artwork-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .artwork-date {
      font-size: 24rpx;
      color: #999;
    }

    .artwork-stats {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 6rpx;

        .stat-text {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }
}
</style>